import React, { useEffect, useState } from 'react'
import needRequestApi from '../../config/needRequestApi'
import { Tag, Table  } from 'antd';
import Qs from 'qs'

function Recommend() {
    const [data, setData] = useState([]),
          [audio ,setAudio] = useState(''),
          [audioKongZhi ,setAudioKongZhi] = useState(0);
    const columns = [
        {
            title: '序号',
            dataIndex: 'orderNo',
            width: 80
        },
        {
            title: '标题',
            dataIndex: 'title',
            render: (text, record) => <div>{text} <a onClick={() => {boFang(record)}}>播放/暂停<audio src={audio} id='audio'></audio></a></div>
        },
        {
            title: '歌手',
            dataIndex: 'singer',
        },
        {
            title: '专辑',
            dataIndex: 'zhuanJi',
        },
    ];
    useEffect(() => {
        needRequestApi('get','/recommend/songs','').then(
            res => {
                console.log(res);   
                let allSongs = res.data.data.dailySongs; 
                let newData = [];
                for(let i=0; i<allSongs.length; i++) {
                    newData.push({
                        key: allSongs[i].privilege.id,
                        orderNo: i+1,
                        title: allSongs[i].name,
                        singer: allSongs[i].ar[0].name,
                        zhuanJi: allSongs[i].al.name,   
                    })
                }
                setData([...newData]);
            }
        ).catch(
            err => {
                console.log(err);
                
            }
        )

    },[])
    const boFang = (record) => {
        console.log(record);
        let timestamp = new Date().getTime();
        let params = {id:record.key, timestamp}
        params = Qs.stringify({...params});
        // requestApi('get', '/song/url',params).then(
        //     res => {
        //         console.log(res);
        //         //获取歌曲地址
        //         let songUrl = res.data.data[0].url;          
        //         setAudio(songUrl);
        //     }
        // ).catch(
        //     err => {
        //         console.log(err);
                
        //     }
        // )
        needRequestApi('get', '/song/url?id='+record.key).then(
            res => {
                console.log(res);
                //获取歌曲地址
                let songUrl = res.data.data[0].url;          
                setAudio(songUrl);
                let audio = document.getElementById('audio');
                console.log(audio);
                if(audioKongZhi === 0) {
                    audio.play();
                    setAudioKongZhi(1);
                }else{
                    audio.pause();
                    setAudioKongZhi(0);
                }               
            }
        ).catch(
            err => {
                console.log(err);  
            }
        )
    }
    return (
        <div>
           <Table columns={columns} dataSource={data} size='large' pagination={{ pageSize: 20 }} scroll={{ y: 440 }}  />
        </div>
    )
}

export default Recommend;
